<!-- 提现记录 -->
<template>
    <div>
        <el-row class="wathdra_record">
            <el-col :span="24" class="form-title">
                <div class="form-title-con">
                    平台收益提现记录列表
                    &#X3000;&#X3000;
                    <el-date-picker
                            v-model="filterModel.time_interval"
                            type="daterange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            size="small"
                            format="yyyy-MM-dd"
                            :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                    &#X3000;
                    <el-button type="primary" size="small" @click="chooseRecord()">筛选</el-button>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="operateName" label="提现人名称"> </el-table-column>
            <el-table-column prop="description" label="提现明细"> </el-table-column>
            <el-table-column prop="operateTime" label="提现时间"> </el-table-column>
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import moment from 'moment';
    import Pagination from "@/types/Pagination";
    @Component({
        extends: Pagination
    })
    export default class WithdrawalRecord extends Vue {
        filterModel = {
            startTime: '',
            endTime: '',
            time_interval: []
        }

        tableData = []
        // pagination = {
        //     pageSizes: [10, 20, 50, 100],
        //     total: 0,
        //     pageSize: 10,
        //     currentPage: 1
        // };
        handleClick () {}
        // 获取提现记录 moment(this.batchBillList[index].bill_deadline_time).format('YYYY-MM-DD')
        async getWithdrawalRecord () {
            // if (this.filterModel.time_interval){
            //     this.filterModel.time_interval[0] = moment(this.filterModel.time_interval[0]).format('YYYY-MM-DD')
            // } else {
            //     this.filterModel.time_interval[0] = '';
            // }
            // if (this.filterModel.time_interval[1]){
            //     this.filterModel.time_interval[1] = moment(this.filterModel.time_interval[1]).format('YYYY-MM-DD')
            // } else {
            //     this.filterModel.time_interval[1] = '';
            // }
            if (this.filterModel.time_interval.length == 0){
                this.filterModel.startTime = ''
                this.filterModel.endTime = ''
            } else {
                this.filterModel.startTime = moment(this.filterModel.time_interval[0]).format('YYYY-MM-DD')
                this.filterModel.endTime = moment(this.filterModel.time_interval[1]).format('YYYY-MM-DD')
            }
            let sendForm = {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                startTime: this.filterModel.startTime,
                endTime: this.filterModel.endTime
            }
            let res = await this.$http.post('platform/income/wthdrawrecords',sendForm)
            if (res.status == 200){
                let { items, totalNum } = res.data;
                this.tableData = items;
                this.pagination.total = totalNum;
            }
        }
        chooseRecord () {
            if (!this.filterModel.time_interval[0]){
                this.$alert('请选择开始时间','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            if (!this.filterModel.time_interval[1]){
                this.$alert('请选择结束时间','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            this.getWithdrawalRecord();
        }
        loadDataForPagination() {
            this.getWithdrawalRecord()
        }
        mounted () {
            this.getWithdrawalRecord();
        }
    }
</script>

<style lang="scss" scoped>
    .wathdra_record {
        .form-title {
            justify-content: left;
        }
        .form-title .form-title-con {
            width: 100%;
            padding-bottom: 12px;
            margin-top: 14px;
        }
    }
</style>